<template>
	<view class="gift-box">
		<view class="aaa" @tap="closeArea"></view>
		<view class="gift-container">
			<image src="../../static/common/close-area.png" class="close-area" @tap="closeArea"></image>
			<swiper class="swiper" 
			:indicator-dots="indicatorDots" 
			:autoplay="autoplay" 
			:interval="interval" 
			:duration="duration" 
			@change="slideItem" 
			:current="currentIndex">
					<swiper-item  v-for="(gift,index) in giftList" :key="index">
							<view class="swiper-item gift-item">
								<view class="gift-name">{{gift.giftName}}</view>
								<image :src="getImg(gift.giftImg)" class="gift-img"></image>
							</view>
					</swiper-item>
			</swiper>
			
			<view class="scroll-list">
				<view class="scroll-box">
					<view class="list-item" v-for="(gift,index) in giftList" :key="index">
						<image :src="getImg(gift.giftImg)" class="list-gift-img" @tap="selectGift(index,gift.giftLevel,gift.id)" :class="{'gt':currentIndex==index}"></image>
					</view>
				</view>
			</view>
			
			<view class="bottom-block">
				<!-- <view class="chaozhi-area area area-select">超值区</view>
				<view class="jingpin_area area">精品区</view> -->
				<view class="btn-buy" @tap="start">立即抢购</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				indicatorDots: false,
				autoplay: false,
				interval: 2000,
				duration: 500,
				giftList:'',
				currentIndex:0,
				Leavel:"",
				giftId:""
			}
		},
		mounted() {
			this.getGiftList();
		},
		methods:{
			start(){
				console.log(this.giftId)
				// this.$emit('qureryList',this.Leavel);
				this.$emit('qureryList',this.giftId);
				this.$emit('closeArea');
			},
			slideItem(event){
				this.currentIndex = event.detail.current;
				this.Leavel = this.giftList[ event.detail.current].giftLevel;
				this.giftId = this.giftList[ event.detail.current].id;
			},
			selectGift(index,leave,id){
				this.currentIndex = index;
				this.Leavel = leave;
				this.giftId = id;
			},
			getImg(url){
				//处理图片路劲
				return this.$CommonJS.getBaseImgUrl(url);
				
			},
			closeArea(){
				this.$emit('closeArea');
			},
			getGiftList(){
				//获取礼品列表
				const _this = this;
				uni.request({
					url:this.$API.URL + this.$API.giftList,
					success(res) {
						console.log(res)
						_this.Leavel = res.data.data[0].giftLevel;
						_this.giftId = res.data.data[0].id;
						_this.giftList = res.data.data;
					},
					fail(res) {
						uni.showToast({
							title:res.data.msg,
							icon:'none'
						})
					}
				})
			},
		}
	}
</script>

<style>
	@import url("gift-list.css");
</style>
